<template>
<div class="title">我的订单</div>
<div class="orderList">
    <ul>
        <li v-for="(order, index) in orderList" :key="index">
            <!-- 头部 -->
            <div class="header">
                <el-row >
                    <el-col :span="18">
                        <div class="orderId">订单ID：{{ order.orderNo }}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="orderCreateTime">创建时间：{{ order.createTime }}</div>
                    </el-col>
                </el-row>
            </div>
            <!--  详情、状态  -->
            <div class="orderDetail">
                <el-row>
                    <!-- 商品信息 -->
                    <el-col :span="18">
                        <div class="goodsInfo" v-for="(orderItem, index) in order.orderItemList" :key="index">
                            <el-row>
                                <el-col :span="3">
                                    <!--  图片  -->
                                    <el-image
                                        fit="contain"
                                        style="width: 50px; height: 50px;"
                                        :src="orderItem.productImage" />
                                </el-col>
                                <el-col :span="7" style="font-size: 14px;">
                                    {{ orderItem.productName }}
                                </el-col>
                                <el-col :span="12" style="font-size: 14px;">
                                    {{orderItem.productPrice}} X {{orderItem.count}}
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <!-- 状态、操作 -->
                    <el-col :span="6">
                        <div v-if="order.status == 1">
                            <el-button type="warning" @click="toPayPage(order.orderNo)">立即付款</el-button>
                        </div>
                        <div v-else>
                            {{ ["已取消", "未付款", "已付款", "已发货", "交易成功", "交易关闭"][order.status] }}
                        </div>
                    </el-col>
                </el-row>
            </div>
        </li>
    </ul>
</div>
</template>

<script setup>
import orderApi from "@/api/orderApi.js";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter();
//服务器路径
const orderList = ref([])

function toPayPage(orderNo) {
    router.push({
        path: '/pay',
        query: {
            orderNo: orderNo
        }
    })
}

//查询当前用户的订单信息
function selectOrderList() {
    orderApi.selectListByUser().then(resp => {
        orderList.value = resp.data;
    });
}

selectOrderList();
</script>

<style scoped>
    .title {
        font-weight: bold;
        font-size: 18px;
    }

    .orderList, .pageNav {
        margin: 10px 0;
        padding: 20px;
        border: 1px solid #222;
        background-color: #FFF;
    }

    .orderList ul li {
        border: 1px solid black;
        margin-bottom: 10px;
        padding: 10px;

    }

    .orderList ul li .header {
        border-bottom: 1px solid black;
    }

    .orderList ul li .orderDetail {
        margin-top: 10px;
    }

    .orderList ul li .orderDetail .goodsInfo {
        margin-bottom: 10px;
        height: 50px;
        line-height: 50px;
    }
    .orderList ul li .header .orderId {
        font-size: 14px;
        color: #222;
    }

    .orderList ul li .header .addrDetail {
        font-size: 14px;
        color: var(--theme-color);
    }

</style>